<template>
  <view class="register-bg">
    <view class="register-header">
      <view class="register-title">LAMP</view>
      <view class="register-subtitle">Sign up using your mobile number</view>
    </view>
    <view class="register-form">
      <view class="input-label">Phone Number</view>
      <view class="phone-input-wrapper">
        <picker mode="selector" :range="countryList" v-model="countryIndex" class="country-picker">
          <view class="country-text">{{ countryList[countryIndex] }} <text class="arrow">▼</text></view>
        </picker>
        <input class="phone-input" v-model="phone" placeholder="+62 82150005000" />
      </view>
      <view class="input-label">Password</view>
      <view class="input-wrapper">
        <image class="input-icon" src="/static/pwd-icon.png" />
        <input class="input" :type="showPwd ? 'text' : 'password'" v-model="password" placeholder="Password" />
        <image class="eye-icon" :src="showPwd ? '/static/eye-open.png' : '/static/eye-close.png'" @click="showPwd = !showPwd" />
      </view>
      <view class="input-label">Confirm Password</view>
      <view class="input-wrapper">
        <image class="input-icon" src="/static/pwd-icon.png" />
        <input class="input" :type="showConfirmPwd ? 'text' : 'password'" v-model="confirmPassword" placeholder="Confirm Password" />
        <image class="eye-icon" :src="showConfirmPwd ? '/static/eye-open.png' : '/static/eye-close.png'" @click="showConfirmPwd = !showConfirmPwd" />
      </view>
      <view class="form-row">
        <uv-checkbox-group  style="    justify-content: center;"
						v-model="agree" >
						<uv-checkbox  name="apple" color="#1ecb6c" >
              <text class="agree-text">
          I agree with <text class="link" @click="onTerms">terms & conditions</text> and <text class="link" @click="onPrivacy">privacy policy</text>
        </text>
						</uv-checkbox>
					</uv-checkbox-group>
        <!-- <checkbox v-model="agree" color="#1ecb6c" />
        <text class="agree-text">
          I agree with <text class="link" @click="onTerms">terms & conditions</text> and <text class="link" @click="onPrivacy">privacy policy</text>
        </text> -->
      </view>
      <button class="signup-btn" @click="onSignUp">Sign Up</button>
    </view>
    <view class="bottom-row">
      <text>Already have an account? </text>
      <text class="login-link" @click="onLogin">Log in here</text>
    </view>
    <uv-popup ref="showCodeModal" round="20" :customStyle="{overflow: 'initial'}">
      <view class="code-modal">
        <view class="modal-icon-box">
          <uv-icon class="modal-icon" size="46" color="#fff" name="phone-fill"></uv-icon>
          <!-- <image class="modal-icon" src="/static/phone-icon.png" /> -->
        </view>
        <view class="modal-title">Log In Phone Number</view>
        <view class="modal-tip">
          Log in code has been sent to <text class="modal-phone">+6292121002200</text>,<br />check your inbox to continue the sign in process.
        </view>
        <view class="code-input-row">
          <uv-code-input v-model="value" @change="change" maxlength="6" @finish="finish"></uv-code-input>
          <!-- <input v-for="(item, idx) in 6" :key="idx" class="code-input" maxlength="1" v-model="codeArr[idx]" @input="onCodeInput(idx, $event)" /> -->
        </view>
        <view class="modal-resend">
          Haven't received the sign in code?
          <text class="resend-link" @click="onResend">Resend it.</text>
        </view>
        <button class="modal-submit-btn" @click="onSubmitCode">Submit</button>
        <view class="modal-other">
          Log in with different method <text class="other-link" @click="onOtherMethod">Here.</text>
        </view>
      </view>
		</uv-popup>
    
    <uv-popup ref="showCodeModal" round="20" :customStyle="{overflow: 'initial'}">
      <view class="code-modal">
        <view class="modal-icon-box">
          <uv-icon class="modal-icon" size="46" color="#fff" name="phone-fill"></uv-icon>
          <!-- <image class="modal-icon" src="/static/phone-icon.png" /> -->
        </view>
        <view class="modal-title">Log In Phone Number</view>
        <view class="modal-tip">
          Log in code has been sent to <text class="modal-phone">+6292121002200</text>,<br />check your inbox to continue the sign in process.
        </view>
        <view class="code-input-row">
          <uv-code-input v-model="code" @change="change" maxlength="6" @finish="finish"></uv-code-input>
          <!-- <input v-for="(item, idx) in 6" :key="idx" class="code-input" maxlength="1" v-model="codeArr[idx]" @input="onCodeInput(idx, $event)" /> -->
        </view>
        <view class="modal-resend">
          Haven't received the sign in code?
          <text class="resend-link" @click="onResend">Resend it.</text>
        </view>
        <button class="modal-submit-btn" @click="onSubmitCode">Submit</button>
        <view class="modal-other">
          Log in with different method <text class="other-link" @click="onOtherMethod">Here.</text>
        </view>
      </view>
		</uv-popup>
    <!-- <uv-action-sheet ref="showCodeModal" @close="closeModal" :round="10"></uv-action-sheet>
    </uv-action-sheet> -->
  </view>
</template>

<script>
import { userRegister } from '@/api/login'
export default {
  data() {
    return {
      countryList: ['INA'],
      countryIndex: 0,
      phone: '',
      password: '',
      confirmPassword: '',
      showPwd: false,
      showConfirmPwd: false,
      agree: false,
      code: '',
      codeArr: [ '', '', '', '', '', '' ]
    }
  },
  methods: {
    onSignUp() {
      if (!this.phone || !this.password || !this.confirmPassword) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' })
        return
      }
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }
      if (!this.agree) {
        uni.showToast({ title: '请同意条款和隐私政策', icon: 'none' })
        return
      }
      this.$refs.showCodeModal.open('bottom');
      // uni.showToast({ title: '注册中...', icon: 'loading' })

    },
    onTerms() {
      uni.showToast({ title: '条款功能待实现', icon: 'none' })
    },
    onPrivacy() {
      uni.showToast({ title: '隐私政策功能待实现', icon: 'none' })
    },
    onLogin() {
      this.$refs.showCodeModal.open('bottom');
      // this.$refs.showCodeModal.open();
    },
    closeModal() {
      this.$refs.showCodeModal.close();
    },
    onCodeInput(idx, e) {
      const val = e.detail.value;
      this.$set(this.codeArr, idx, val.slice(-1));
      // 自动跳到下一个输入框
      if (val && idx < 5) {
        const next = this.$el.querySelectorAll('.code-input')[idx + 1];
        next && next.focus();
      }
    },
    onResend() {
      uni.showToast({ title: '验证码已重发', icon: 'none' })
    },
    async onSubmitCode() {
      console.log(this.code);
      if (this.code.length !== 6) {
        uni.showToast({ title: '请输入6位验证码', icon: 'none' })
        return;
      }
      await userRegister({
        phone: this.phone,
        password: this.password,
        code: this.code
      })
      uni.$uv.toast('Registration successful, please log in')
      setTimeout(() => {
        uni.$uv.route('/pages/login/login');
      }, 300)
    },
    onOtherMethod() {
      uni.showToast({ title: '切换其他登录方式', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-bg {
  min-height: 100vh;
  width: 100vw;
  background: #f8f8fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40rpx;
}
.register-header {
  margin-top: 80rpx;
  margin-bottom: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-title {
  font-size: 80rpx;
  color: #5d866b;
  font-weight: bold;
  letter-spacing: 6rpx;
}
.register-subtitle {
  font-size: 30rpx;
  color: #5d6660;
  margin-top: 10rpx;
}
.register-form {
  width: 90vw;
  max-width: 700rpx;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.input-label {
  font-size: 28rpx;
  color: #5a6273;
  margin: 24rpx 0 8rpx 8rpx;
  align-self: flex-start;
}
.phone-input-wrapper {
  display: flex;
  align-items: center;
  border: 3rpx solid #1ecb6c;
  border-radius: 18rpx;
  background: #fff;
  margin-bottom: 28rpx;
  width: 100%;
  height: 90rpx;
}
.country-picker {
  width: 120rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10rpx;
}
.country-text {
  font-size: 32rpx;
  color: #5d866b;
  display: flex;
  align-items: center;
}
.arrow {
  font-size: 26rpx;
  color: #5d866b;
  margin-left: 6rpx;
}
.phone-input {
  flex: 1;
  height: 90rpx;
  border: none;
  background: transparent;
  font-size: 32rpx;
  color: #1a2233;
  margin-left: 16rpx;
}
.input-wrapper {
  display: flex;
  align-items: center;
  border: 2rpx solid #bfc8d6;
  border-radius: 16rpx;
  padding: 0 20rpx;
  margin-bottom: 28rpx;
  background: #fff;
  width: calc(100% - 40rpx);
  height: 90rpx;
}
.input-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}
.input {
  flex: 1;
  height: 90rpx;
  border: none;
  background: transparent;
  font-size: 32rpx;
  color: #1a2233;
}
.eye-icon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 12rpx;
}
.form-row {
  display: flex;
  // align-items: center;
  margin-bottom: 40rpx;
  width: 100%;
}
.agree-text {
  font-size: 26rpx;
  color: #222;
  margin-left: 16rpx;
}
.link {
  color: #1ecb6c;
  text-decoration: underline;
  font-weight: bold;
}
.signup-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
  color: #fff;
  font-size: 34rpx;
  border-radius: 45rpx;
  font-weight: bold;
  margin-top: 10rpx;
  margin-bottom: 40rpx;
}
.bottom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #222;
}
.login-link {
  color: #1ecb6c;
  margin-left: 10rpx;
  text-decoration: underline;
}
.code-modal {
  padding: 160rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
.modal-icon-box {
  width: 192rpx;
  height: 192rpx;
  background: #1ecb6c;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,203,108,0.15);
  position: absolute;
  top: -96rpx;
}
.modal-title {
  font-size: 40rpx;
  color: #232b3b;
  font-weight: bold;
  margin-bottom: 18rpx;
  margin-top: 10rpx;
  text-align: center;
}
.modal-tip {
  font-size: 26rpx;
  color: #5a6273;
  text-align: center;
  margin-bottom: 36rpx;
  line-height: 1.6;
}
.modal-phone {
  color: #1ecb6c;
  font-weight: bold;
}
.code-input-row {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
  gap: 18rpx;
}
.code-input {
  width: 70rpx;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 16rpx;
  background: #fff;
  text-align: center;
  font-size: 38rpx;
  color: #232b3b;
}
.modal-resend {
  font-size: 26rpx;
  color: #5a6273;
  margin-bottom: 30rpx;
  text-align: center;
}
.resend-link {
  color: #1ecb6c;
  font-weight: bold;
  margin-left: 8rpx;
}
.modal-submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  margin-top: 10rpx;
}
.modal-other {
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  color: #222;
}
.other-link {
  color: #1ecb6c;
  text-decoration: underline;
  margin-left: 6rpx;
}
}
</style>
